<template>
  <el-menu
    @select="handleSelect"
    active-text-color="#399"
    mode="horizontal"
    :default-active="activeIndex"
  >
    <el-menu-item
      v-for="(item, index) of navs"
      :key="index"
      :index="index + ''"
      >{{ item.title }}</el-menu-item
    >
  </el-menu>
  <!-- 跳转 -- 申明 -->
  <!-- <el-button type="primary">恩牛</el-button>
      <nuxt-link to="/index" active-class="app_header_active">首页</nuxt-link>
      <nuxt-link to="/goods" active-class="app_header_active">商品</nuxt-link>
      <nuxt-link to="/user" active-class="app_header_active">用户</nuxt-link>
      <nuxt-link to="/login" active-class="app_header_active">登录</nuxt-link>
      <nuxt-link to="/reg" active-class="app_header_active">注册</nuxt-link> -->
</template>

<script lang="ts">
import { Vue, Component, Watch} from 'vue-property-decorator'
import {Route} from 'vue-router'

type TNavs = {path:string, title:string}

@Component
export default class AppHeader extends Vue{
  activeIndex: string = "-1"
  navs:TNavs[] = [
        { path: "/index", title: "首页" },
        { path: "/goods", title: "商品" },
        { path: "/user", title: "用户" }
      ]
  handleSelect(key:number, keyPath:number):void {
      this.$router.push(this.navs[key].path);
    } 
    //首次运行 数据观测
  @Watch('$route',{immediate:true,deep:true})
  onRouteChange(route:Route){
        let find =false;
    this.navs.map((item,index)=>{
      if(item.path == '/') this.$router.push({name:'root'})
      if(route.path == item.path) {
        this.activeIndex= index+ ''
        find =true
      }
    })
    if(!find) this.activeIndex = '-1'

  }

}
// export default {
//   data() {
//     return {
//       activeIndex: "-1",
//       navs: [
//         { path: "/index", title: "首页" },
//         { path: "/goods", title: "商品" },
//         { path: "/user", title: "用户" }
//       ]
//     };
//   },
//   created() {},
//   mounted() {},
//   watch:{
//       $route:{
//         immediate:true,
//         handler(route){
//           let find =false;
//           this.navs.map((item,index)=>{
//             if(item.path == '/') this.$router.push({name:'root'})
//             if(route.path == item.path) {
//               this.activeIndex= index+ ''
//               find =true
//             }
//           })
//           if(!find) this.activeIndex = '-1'
//         }
//       }
//     },
//   methods: {
//     handleSelect(key, keyPath) {
//       this.$router.push(this.navs[key].path);
//     },
//   }
// };
</script>

<style scoped>
.app_header_active {
  background-color: #ccc;
  color: #fff;
}
</style>
